import React,{useEffect} from 'react'
import { useDispatch, useSelector } from "react-redux";
import { Carousel } from 'antd';
import {useNavigate} from 'react-router-dom'
type Props = {}

const Swiper = (props: Props) => {
  const navigate=useNavigate()
  const contentStyle: React.CSSProperties = {
    margin: 0,
 
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };
  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  };
    const list = useSelector((store: any) => store.reducer.list);
    console.log(list);
 
  return (
    <div> <Carousel afterChange={onChange}>
      {
        list.map((item:any,index:number)=>{
          return  <div key={index}>
      <h3 style={contentStyle} onClick={()=>navigate("/home/Details/"+item.id, { state: item })}>
        <img src={item.cover} alt="" />
      </h3>
    </div>
        })
      }
   
   
  </Carousel></div>
  )
}

export default Swiper